<template>
    <div class="addList">
        <div class="add-list">
            <div class="add-item" v-for="item in list" :key="item.addressId" @click="selAddress(item)">
                <div class="left">
                    <div class="address flex-a flex-b">
                        <div class="dz">{{ item.userAddress }}</div>
                        <div class="right">
                            <Del color="#A2A2A2" size="14" style="margin-right: 30rpx;" @click="delAddr(item)" />
                            <Edit color="#A2A2A2" size="14" @click.stop="editAddress(item)" />
                        </div>
                    </div>
                    <div class="detail">{{ item.userAddressInit }}</div>
                    <div class="flex-a name"><span>{{ item.userName }}</span><span class="phone">{{
                        item.userPhone
                            }}</span>
                    </div>
                </div>
            </div>
        </div>
        <div v-if="list.length == 0" class="empty">
            <div><img src="https://cxj.szzkba.cn/upload/i/2024/09/25/154732.png" alt=""></div>
            <div>暂无数据</div>
            <div>请先添加地址</div>
        </div>
    </div>
</template>

<script lang="ts">
import Taro, { useRouter } from '@tarojs/taro';
import { reactive, toRefs, onMounted } from 'vue';
import { Del, Edit } from '@nutui/icons-vue-taro';
import { getAddressList, delAddress } from '../../../../api/index'
export default {
    components: {
        Del, Edit
    },
    setup() {
        const data = reactive({
            addressList: [],
            dataOptions: {
                id: 'addressId',
                addressDetail: 'testaddressDetail',
                addressName: 'userName'
            },
            list: [],
            address: {},
            type: '',
            server_id: '',
            server_User_Id: '',
            client_ID: '',
            mealIndex: -1,
            num: 1,
            orderServiceContent: '' as any
        });

        onMounted(() => {
            getAddressList().then(response => {
                if (response.code == 0) {
                    data.list = response.data.list
                }
            })
            const router = useRouter();
            if (router.params.type) {
                data.type = router.params.type
            }
            if (router.params.orderServiceContent) {
                data.orderServiceContent = router.params.orderServiceContent
            }
            if (router.params.server_id) {
                data.server_id = router.params.server_id
            }
            if (router.params.server_User_Id) {
                data.server_User_Id = router.params.server_User_Id
            }
            if (router.params.client_ID) {
                data.client_ID = router.params.client_ID
            }
            if (router.params.mealIndex) {
                data.mealIndex = Number(router.params.mealIndex)
            }
            if (router.params.num) {
                data.num = Number(router.params.num)
            }
        });
        const addAddress = () => {
            Taro.navigateTo({ url: '/packageA/pages/writeAddress/index?server_id=' + data.server_id + '&client_ID=' + data.client_ID + '&server_User_Id=' + data.server_User_Id + '&orderServiceContent=' + data.orderServiceContent });
        }
        const editAddress = (item) => {
            Taro.navigateTo({ url: '/packageA/pages/writeAddress/index?addressId=' + item.ID + '&server_id=' + data.server_id + '&client_ID=' + data.client_ID + '&server_User_Id=' + data.server_User_Id + '&orderServiceContent=' + data.orderServiceContent });
        }
        const selAddress = (item) => {
            if (data.type == 'order') {
                Taro.redirectTo({ url: '/packageA/pages/subOrder/index?addressId=' + item.ID + '&server_id=' + data.server_id + '&client_ID=' + data.client_ID + '&server_User_Id=' + data.server_User_Id + '&mealIndex=' + data.mealIndex + '&num=' + data.num + '&orderServiceContent=' + data.orderServiceContent });
            } else if (data.type == 'house') {
                Taro.redirectTo({ url: '/packageA/pages/houseOrder/index?addressId=' + item.ID });
            }
        }
        const delAddr = (item) => {
            delAddress(item.ID).then(res => {
                if (res.code == 0) {
                    Taro.showToast({
                        title: '删除成功',
                        icon: 'success',
                        duration: 2000
                    })
                }
            })
        }
        return {
            ...toRefs(data),
            addAddress,
            editAddress,
            selAddress,
            delAddr
        }
    }
};
</script>


<style lang="scss">
.addList {
    .empty {
        text-align: center;
        height: 100vh;

        img {
            width: 300rpx;
            height: 300rpx;
            margin-top: 250rpx;
        }

        div:nth-child(2) {
            font-size: 30rpx;
            font-weight: bold;
            color: #242745;
            margin: 100rpx 0 20rpx;
        }

        div:last-child {
            color: #788290;
            font-size: 24rpx;
        }
    }

    .add-list {
        padding-top: 20rpx;

        .add-item {
            padding: 30rpx;
            box-sizing: border-box;
            background: #fff;

            .left {
                .address {
                    .dz {
                        color: #9A9BA7;
                        font-size: 26rpx;
                    }
                }

                .detail {
                    color: #0D0F32;
                    font-size: 28rpx;
                    margin: 10rpx 0;
                    font-weight: bold;
                }

                .name {
                    color: #151738;
                    margin-top: 10rpx;
                    font-size: 28rpx;
                    margin-right: 10rpx;

                    span:first-child {
                        margin-right: 15rpx;
                    }
                }
            }

            .right {
                color: #C0C0C0;
                font-size: 30rpx;
            }
        }
    }

    .nut-address-list__bottom {
        position: fixed;
        bottom: 0;

        .nut-button {
            background: #4972F2;
        }
    }
}
</style>